<template>
  <div class="foot-nav">
    <div class="left_item">
      <div class="return_btn" v-if="props.currentPage.type === 'deviceDetail'" @click="goBack">
        <ArrowLeftOutlined />
        <span>我的设备</span>
      </div>
      <LogoComp v-else />
    </div>
    <div class="right_item">
      <LanguageSwitch />
      <WinCtl></WinCtl>
    </div>
  </div>
</template>

<script setup>
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import WinCtl from './WinCtl.vue'
import LanguageSwitch from './LanguageSwitch.vue'
import LogoComp from './LogoComp.vue'

const props = defineProps(['currentPage'])
const emit = defineEmits(['goBack', 'changeLanguage'])

const goBack = () => {
  emit('goBack')
}

const swicthHadler = () => {
  emit('changeLanguage')
}
</script>

<style scoped>
.foot-nav {
  padding: 0 10px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  -webkit-app-region: drag;
  background-color: #f2f2f2;
}
.right_item,
.left_item {
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  gap: 20px;
}
.return_btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
</style>
